<style type="text/css">
  #main-image{
    width:500px;
    height:500px;
  }
  #product-images {
    display:inline;
    float:left;
    height:578px;
    margin-right:10px;
    width:100%;
  }
  #product-images #main-image {
    min-height:384px;
    position:relative;
    margin:0 auto;
    width:100%;
    overflow:hidden;
  }
  #product-images #main-image img {
    bottom:0;
    left:0;
    margin:auto;
    position:absolute;
    right:0;
    top:0;
  }
  ul.thumbnails {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
  }
  ul.thumbnails li {
    border:1px solid white;
    float:left;
    margin-right:5px;
    min-height:50px;
    padding:3px;
    position:relative;
    width:62px;
  }
  ul.thumbnails li img {
    bottom:0;
    left:0;
    margin:auto;
    position:absolute;
    right:0;
    top:0;
  }
  ul.thumbnails li.selected {
    border-color:#999999;
  }
  #thumbnails{
    display:table;
    margin:0 auto;
  }
</style>
<div id="block-lists" class="block">
  <div class="secondary-navigation">
    <ul>
      <% Category.all.each_with_index do |c, i|  %>
        <li class="<%= 0==i ? 'first' : ''  %> <%=  c.name == @article.category.name ? 'active' : '' %>  "><a href="/news?keywords=<%= c.name   %>"><%= c.name %></a></li>
      <% end %>
    </ul>
    <div class="clear">   </div>
  </div>            
  
  <div class="content">
    
    <h1>行业快讯</h1>
    <div id="product-images">
      
      <div id="main-image">
        <% unless  @article.article_images.first.blank? %>
          <%=  image_tag(@article.article_images.first.try(:image).try(:url).to_s) %>
        <% end %>
      </div>
      <div id="thumbnails">
        <ul id="product-thumbnails" class="thumbnails">
          <%@article.article_images.each do |image|%>
            <li > <%= link_to_function  image_tag(image.image.url(:thumb)) , "setImage(this,'#{image.image.url(:product)}')"  %></li>
          <%end%>
        </ul>
        
        <% javascript_tag  do  %>
          function setImage(obj,srcValue){
          $$('#product-thumbnails li').each(function(n){n.className = ''});
          $$('#main-image img')[0].src= srcValue;
          obj.parentNode.className = 'selected'
          }
        
        <%end %>  
      </div>
      
    </div>
    <br />
    
    <h2 style="text-align:center;"><%=h @article.title %>  </h2>
    <h3 style="text-align:center;"> <%=h @article.subhead %> </h3>
    <p style="text-align:right;padding-right:30px;">上传用户:<%=h @article.try(:user).try(:name) %>&nbsp;&nbsp;
    作者:<%=h @article.try(:user).try(:name) %>&nbsp;&nbsp;来源：<%=h @article.summary %></p>
    <p style="border:1px solid #C0C0C0;
       margin:0 auto;
       padding:5px;
       width:700px;"> <%=h @article.summary %></p>
    <div style="padding:30px;">
      <%=h @article.body %>
    </div>
    
    
    <table class="table">
      <tr class="odd">
        <th>回复内容</th>
        <th>用户</th>
        <th>回复时间</th>
      </tr>
      <%  @article_comments.each do |comment|%>
        <tr class="odd">
          <td width=""><%=h comment.content %></td>
          <td><%=h comment.try(:user).try(:name) %></td>
          <td ><%=h comment.created_at.strftime("%Y-%m-%d %H:%M") %></td>
        </tr>
      <% end %>
      <tr class="odd">
        <td  colspan="2">
          <% form_for(@article_comment , :url => news_index_path,:html => {:class => :form} ) do |f| %>
            <%= f.hidden_field :article_id%>
            <%= f.hidden_field :ipaddr %>
            <%= f.error_messages %><br />
            回复<br />
            <%= f.text_area :content ,:size => '90x5' %>
            <p style="text-align:right">  <%= f.submit '提交' , :class => :button %>
            </p>
          </td>
        <% end %>
      </tr>  
    </table>
    <%= will_paginate @article_comments  %>
                                                
    <br />
  </div>
</div>
